<template>
     <div class="props-table">
        <div
        v-for="(value, key) in finalProps"
        :key="key"
        class="prop-item"
        >
            <span class="label" v-if="value.text">{{value.text}}</span>
            <component
            :is="value.component" 
            :[value.valueProp]="value.value" 
            v-bind="value.extraProps"
            v-on="value.events"
            >
                <template v-if="value.options">
                    <component
                    :is="value.subComponent"
                    v-for="(option, k) in value.options" :key="k"
                    :value="option.value"
                    >
                        <render-vnode :vNode="option.text"></render-vnode>
                    </component>
                </template>
            </component>
        </div>
     </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, VNode } from 'vue'
import { reduce } from 'lodash'
import { PropsToForms, mapPropsToForms } from '../propsMap'
import { TextComponentProps } from '../types/defaultProps'
import RenderVnode from './RenderVnode'
import { ColorPicker } from '../components/index'

interface FormProps {
    component: string;
    subComponent?: string;
    value: string;
    extraProps?: {[key: string]: any};
    text?: string;
    options?: {text: string | VNode; value: any }[];
    valueProp: string;
    eventName: string;
    events: {[key: string]: (e: any) => void};
}
export default defineComponent({
    name: 'props-table',
    props: {
        props: {
            type: Object as PropType<TextComponentProps>,
            required: true
        }
    },
    components: {
        RenderVnode,
        // ColorPicker
    },
    emits: ['change'],
    setup(props, {emit}) {
        const finalProps = computed(() => {
            return reduce(props.props, (result, value, key) => {
                const newKey = key as keyof TextComponentProps
                const item = mapPropsToForms[newKey]
                console.log('--finalProps---')
                console.log(item)
                if (item) {
                    const { valueProp = 'value', eventName = 'change', initalTransform, afterTransform } = item
                    const newItem: FormProps = {
                        ...item,
                        value: initalTransform ? initalTransform(value) : value,
                        valueProp,
                        eventName,
                        events: {
                        [eventName]: (e: any) => { 
                            console.log('---eventName-')
                            console.log(e)
                            emit('change', { key, value: afterTransform? afterTransform(e) : e })}
                        }
                    }
                    result[newKey] = newItem
                    }
                    return result
            }, {} as { [key: string]: FormProps })
        })

        console.log('--22-finalProps--')
        console.log(finalProps)
        return {
            finalProps
        }
    },
})
</script>





<style>
.prop-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.label {
  width: 28%;
}
.prop-component {
  width: 70%;
}

</style>